<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div th:replace="common/top"/>
<div id="Content">

    <div id="Catalog">
        <section class="pricing" style="height: 900px">

            <div class="col-ten pricing-table">

        <form action="/account/update_info" method="post">

            <h3>User Information</h3>

            <table>
                <tr>
                    <td>User ID:</td>
                    <td th:text="${session.account.getUsername()}"></td>
                </tr>
                <tr>
                    <td>New password:</td>
                    <td><input type="password" name="password"></td>
                </tr>
                <tr>
                    <td>Repeat password:</td>
                    <td><input type="password" name="repeatedPassword"/></td>
                </tr>
            </table>

            <h3>Account Information</h3>

            <table>
                <tr>
                    <td>First name:</td>
                    <td><input type="text" name="firstName" th:value="${session.account.getFirstName()}"/></td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td><input type="text" name="lastName" th:value="${session.account.getLastName()}"/></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input type="text" name="email" th:value="${session.account.getEmail()}"/></td>
                </tr>
                <tr>
                    <td>Phone:</td>
                    <td><input type="text" name="phone" th:value="${session.account.getPhone()}"/></td>
                </tr>
                <tr>
                    <td>Address 1:</td>
                    <td><input type="text" name="address1" th:value="${session.account.getAddress1()}"/></td>
                </tr>
                <tr>
                    <td>Address 2:</td>
                    <td><input type="text" name="address2" size="40" th:value="${session.account.getAddress2()}"/></td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td><input type="text" name="city" th:value="${session.account.getCity()}"/></td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td><input type="text" name="state" size="4" th:value="${session.account.getState()}"/></td>
                </tr>
                <tr>
                    <td>Zip:</td>
                    <td><input type="text" name="zip" size="10" th:value="${session.account.getZip()}"/></td>
                </tr>
                <tr>
                    <td>Country:</td>
                    <td><input type="text" name="country" size="15" th:value="${session.account.getCountry()}"/></td>
                </tr>
            </table>

            <h3>Profile Information</h3>

            <table>
                <tr>
                    <td>Language Preference:</td>
                    <td>
                        <select name="languagePreference">
                            <option th:each="language:${languageList}" th:text="${language}"
                                    th:value="${language}"></option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Favourite Category:</td>
                    <td><select name="favouriteCategoryId">
                        <option th:each="category:${categoryList}" th:text="${category}"
                                th:value="${category}"></option>
                    </select>
                </tr>
                <tr>
                    <td>Enable MyList</td>
                    <td><input type="checkbox" name="listOption" value="1"/></td>
                </tr>
                <tr>
                    <td>Enable MyBanner</td>
                    <td><input type="checkbox" name="bannerOption" value="1"/></td>
                </tr>

            </table>

            <input value="Save Account Information"
                   type="submit">

        </form>

        <!--        th:href="@{'/catalog/viewProduct'(productId=${product.productId})}-->
        <a th:href="@{'/order/viewOrderList'(username=${session.username})}">My Orders</a>


    </div>


        </section>


    </div>
    <div th:replace="common/bottom"/>
</div>
</body>
</html>